<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/paging.js"></script>
    <link rel="stylesheet" href="../css/paging.css">

</head>
<style>
    .back-news-title {
        height: 30px;
        width: 90%;
        margin: auto;
    }

    .back-news-title div:first-child {
        float: left;
    }

    .back-news-title div:last-child {
        float: right;
    }

    .back-news-content {
        width: 90%;
        margin: auto;
    }

    .back-news-content table {
        border-collapse: collapse;
    }

    .back-news-content tr {
        line-height: 30px;
    }

    .back-news-content table tr td {
        padding: 0 10px;
        border: 1px solid gray;

    }

    .back-news-content table thead {
        background-color: #3594d6;
    }

    .back-news-content table thead:first-child, .back-news-content table tr td:first-child {
        text-align: center;
    }

    .back-news-content table tr td:last-child a {
        margin-left: 10px;
    }

    /*单行变色*/
    .back-news-content table tr:nth-child(even) {
        /*background-color: silver;*/
    }

    a {
        text-decoration: none;
    }

    table tr:hover {
        background-color: silver;
    }

    .over {
        background-color: silver;
    }
</style>
<script>
    $(function () {
        getPageData();
        //选中即当前行变色，当前复选框选中
        // $("table tr").on("click", function () {
        //     $(this).toggleClass("over");
        //     $(this).find("input[type=checkbox]").prop("checked", !$(this).find("input[type=checkbox]").prop("checked"));
        //     checktrue();
        // })

    });


    function getPageData() {
        let json = {page: $("#page").val(), pageSize: $("#pageSize").val()};

        let data = myAjax("backNewsGet", json, "get");
        console.log(data);
        let num = data[0].num;
        $("#countSize").html(num);
        let html = '<table>\n' +
            '        <thead>\n' +
            '        <td style="width: 5%;text-align: center">选中<input type="checkbox" id="allcheck" onclick="checkorcheck()"></td>\n' +
            '        <td style="width: 50%;">信息标题</td>\n' +
            '        <td style="width: 20%">栏目</td>\n' +
            '        <td style="width: 5%">点击</td>\n' +
            '        <td style="width: 10%">发布时间</td>\n' +
            '        <td style="width: 10%">操作</td>\n' +
            '        </thead>';
        data = data[0].list;
        for (let i = 0; i < data.length; i++) {
            html += '<tr onclick="checktrue()">\n' +
                '            <td><input type="checkbox" name="news-checkbox"><input type="hidden" value="' + data[i].id + '"></td>\n' +
                '            <td style="color: blue"><a href="javascript:updatenews(' + data[i].id + ')">' + data[i].title + '</a></td>\n' +
                '            <td>' + data[i].type + '</td>\n' +
                '            <td>' + data[i].num + '</td>\n' +
                '            <td>' + data[i].createtime + '</td>\n' +
                '            <td style="color: blue"><a href="javascript:updatenews(' + data[i].id + ')">编辑</a>' +
                '<a href="javascript:deleteData(' + data[i].id + ',' + "'" + 'newsUpdate' + "'" + ')">删除</a></td>\n' +
                '        </tr>';
        }
        html += '</table>';
        $("#newsTable").html(html);
    }

    function updatenews(id) {
        sessionStorage.setItem("newsId", id);
        $('#content').load('b-newsadd.html');

    }
</script>
<body>
<div id="paging"></div>
<div class="back-news-title">
    <a href="javascript:$('#content').load('b-newsadd.html')">
        <div>【添加信息】</div>
    </a>
    <div>
        <span>标题：</span><input type="text">
        <select>
            <option>是否推荐</option>
        </select>
        <select>
            <option>是否置顶</option>
        </select>
        <select>
            <option>是否审核</option>
        </select>
        <select>
            <option>新闻动态</option>
            <option>行业动态</option>
            <option>公司新闻</option>
        </select>
    </div>

</div>
<div class="back-news-content" id="newsTable">
</div>
<div class="back-page">
    <div onclick="checkall()">全选</div>
    <div onclick="uncheckall()">清空</div>
    <div onclick="fanxuan()">反选</div>

    <div onclick="deleteChecked('newsUpdate')">删除</div>
    <div onclick="firstPage()">首页</div>
    <div onclick="lastPage()">上一页</div>
    <div onclick="nextPage()">下一页</div>
    <div onclick="endPage()">尾页</div>
    <div>
        <span>共</span><span id="countSize">10</span><span>条</span>
        <span>已选中</span><span id="checkNum">0</span><span>条</span>
        <span>每页显示</span><input type="text" style="width: 20px" id="pageSize" value="10"><span>条</span>
        <span>跳转</span><input type="text" style="width: 20px" id="page" value="1"><span>页</span>
        <input type="button" value="跳转" onclick="turnPage()">
    </div>

</div>
</body>
</html>